<template>
<h2>一个人的信息</h2>
  姓：<input type="text" v-model="person.firstName"><br>
  名：<input type="text" v-model="person.lastName"><br>
  全名<input type="text" v-model="person.fullName"><br>
</template>

<script>
import {computed, reactive} from "vue";

export default {
  name: "Demo",
  setup() {
    let person = reactive({
      firstName: '张',
      lastName: '三',
    })
    //在person里面追加fullName 只能set 简写版
    /*person.fullName = computed(()=>{
      return person.firstName+'-'+person.lastName
    })*/

    //完整版
    person.fullName = computed({
      get(){
        return person.firstName+'-'+person.lastName
      },
      set(value){
        const nameArr = value.split('-')
        person.firstName=nameArr[0]
        person.lastName=nameArr[1]
      }
    })

    return {
      person,
    }
  }
}
</script>

<style scoped>

</style>
